<template>
	<view class="page" v-if="refreshCheckbox == false">
		<view class="maskTitle-box">
			<image class="icon" mode="aspectFit" src="/static/image/text_icon.png"></image>
			<view class="title">任务名称</view>
			<view class="import-sign">*</view>
			<view class="switch-box">
				<switch class="switch" @change="switchChange" />
				<view class="switch-value">
					{{datainfo.isSelf == 2 ? '公开' : '隐藏'}}
				</view>
			</view>
		</view>
		<view class="maskTitle-input-box">
			<input class="maskTitle-input" @input="TasknameinputChange" type="text" placeholder="请输入标题" :value="datainfo.taskName" :disabled="classifyDisalogType" />
		</view>
		<view class="maskContent-box">
			<view class="content-title">
				任务内容
			</view>
			<textarea class="input-content" @input="taskDetailsinputChange" :value="datainfo.taskDetails" placeholder="请输入内容" />
		</view>
		<view class="cell-item border-top" @click="uploadImage">
			<view class="icon-box">
				<image class="icon" mode="aspectFit" src="/static/image/img_icon.png"></image>
			</view>
			<view class="title">图片</view>
			<!-- <view class="import-sign">*</view> -->
			<view class="value-box">
				<view class="value" v-if="uploadList.length > 0">
					已选择{{uploadList.length}}张
				</view>
				<view class="more-icon">
					<image class="icon" mode="aspectFit" src="/static/image/more_right_icon.png"></image>
				</view>
			</view>
		</view>
		<view class="card-box">
			<cell border-bottom @click="directorChange('leader')" title="负责人" must cellType="closetag"
				:tagList="leaders" @tagclose="leaderCloseChange"></cell>
			<cell border-bottom @click="directorChange('participants')" title="添加参与人" cellType="closetag"
				:tagList="participant" @tagclose="participantsCloseChange"></cell>
			<picker mode="date" :value="datainfo.endTime" :start="startDate" @change="bindDateChange">
				<cell border-bottom title="截止时间" :value="datainfo.endTime" must></cell>
			</picker>
			<cell border-bottom title="优先级" :value="priorityList[maskInfo.priority]" @click="prioritySheet"></cell>
			<cell border-bottom title="重要程度" :value="importantList[maskInfo.important]" @click="importantSheet"></cell>
		</view>
		<view class="card-box">
			<cell border-bottom title="任务分类" :value="datainfo.label.name" must @click="classifyOpen"></cell>
			<cell border-bottom title="标签" cellType="input" :value="datainfo.keyword" :disabled="classifyDisalogType" @inputValue="inputValueChange" name="keyword" placeholder-text="请输入标签"
				:more="false" must></cell>
			<cell border-bottom title="流转方式" :more="false" :checkboxList="checkboxList" cellType="checkbox" @checkboxChange="checkboxChange"></cell>
			<cell boorder-bottom title="奖励金额" :disabled="classifyDisalogType" placeholderText="请输入金额" @inputValue="inputValueChange" name="bonus" cellType="money"
				:more="false"></cell>
			<cell boorder-bottom title="奖励分值" :disabled="classifyDisalogType" placeholderText="请输入分值" cellType="money"
				company="分" :more="false" @inputValue="inputValueChange" name="score"></cell>
		</view>
		<view class="card-box">
			<cell border-bottom title="备注" cellType="input" :disabled="classifyDisalogType" @inputValue="inputValueChange" name="remark" placeholder-text="请输入"
				:more="false"></cell>
			<cell border-bottom title="交付结果" cellType="input" :disabled="classifyDisalogType" @inputValue="inputValueChange" name="workProducts" placeholder-text="请输入"
				:more="false"></cell>
			<cell border-bottom title="评判标准" cellType="input" :disabled="classifyDisalogType" placeholder-text="请输入"
				:more="false" @inputValue="inputValueChange" name="evaluation"></cell>
		</view>
		<view class="button-box">
			<view class="confirm-button" @click="confirm">
				确认发起
			</view>
		</view>
		<view class="clear-tabbar"></view>
		<classify v-if="classifyDisalogType == true" :selected="classifyselected" @confirm="classifyChange"
			@cancel="classifyCancel"></classify>
	</view>
</template>

<script>
	import cell from '../cell/cell';
	import * as api from '@/utils/api.js';
	import {
		parseDate,uploadImage
	} from '@/utils/utils.js';
	import classify from '../classify/classify'
	export default {
		components: {
			cell,
			classify,
		},
		props:{
			page:{
				type:Boolean,
				default:true,
			},
			leaders: { // 负责人列表
				type:Array,
				default:[],
			},
			participant:{// 参与人列表
				type:Array,
				default:[],
			},
			taskId:{ // 父级任务id
				type:String,
				default:null
			}
		},
		data() {
			return {
				datainfo:{
					taskName:null, // 任务名称
					taskType:1, //任务类型：1，指向任务。2，非指向任务。3，任务树。4，任务流
					taskDetails:null, // 任务内容
					keyword:null, // 关键词
					leaders:[], // 负责人
					label:null,// 任务分类
					participant:[], // 参与人
					imageFiles:[], // 图片文件
					importance:'3级重要', // 重要程度
					priority:'3级紧急', // 紧急程度
					isSelf:2, // 是否是私有任务 1，是，2 不是
					cycle:0, // 周期，1，天，2，周，3，月，4，季度
					endTime:null, //结束时间
					bonus:null, //(金额)贡献值
					score:null,// 积分（评分）
					remark:null, // 备注
					disassemble:1,// 分解（1，是，2，否）
					redeploy:1, // 转派（1，是，2，否）
					workProducts:null, // 交付结果
					evaluation:null, // 评价标准
				},
				startDate: null, // 开始时间
				classifyselected: null,
				classifyDisalogType: false,
				refreshCheckbox:false, // 刷新流转方式组件
				leader: [], // 负责人列表
				participants: [], // 参与人列表
				checkboxList: [{
						id: 1,
						name: '转派',
					},
					{
						id: 2,
						name: '分解'
					},
				],
				priorityList: ['1级紧急', '2级紧急', '3级紧急', '4级紧急', '5级紧急'],
				importantList: ['1级重要', '2级重要', '3级重要', '4级重要', '5级重要'],
				uploadList: [], // 上传图片临时路径
				maskInfo: { // 发起任务表单信息
					priority: 2, // 优先级
					important: 2, // 重要程度
				},
			}
		},
		onLoad(e) {
		
		},
		mounted(){
			let data = parseDate();
			if (this.page == true) {
				uni.hideHomeButton();
			}
			this.startDate = data.year + '-' + data.month + '-' + data.day;
			let personList = getApp().globalData.personList;
			this.leader = personList.leader;
			this.participants = personList.participants;
		},
		onShow() {
			
			// leader:[],// 负责人列表
			// participants:[],// 参与人列表
		},
		methods: {
			/**
			 * 确认发起
			 */
			async confirm(){
				let that = this;
				let datainfo = JSON.parse(JSON.stringify(that.datainfo));   
				let leader = that.leaders;
				
				if(datainfo.taskName == null || datainfo.taskName ==""){
					uni.showToast({
						title: '请输入任务名称',
						icon:'none',
						duration: 2000
					});
					return;
				}else if(leader.length == 0){
					uni.showToast({
						title: '请选择负责人',
						icon:'none',
						duration: 2000
					});
					return;
				}else if(datainfo.endTime == null){
					uni.showToast({
						title: '请选择截止时间',
						icon:'none',
						duration: 2000
					});
					return;
				}else if(datainfo.label == null){
					uni.showToast({
						title: '请选择任务分类',
						icon:'none',
						duration: 2000
					});
					return;
				}else if(datainfo.keyword == null || datainfo.keyword ==""){
					uni.showToast({
						title: '请输入标签',
						icon:'none',
						duration: 2000
					});
					return;
				}
				let participants = that.participant;
				let maskInfo = that.maskInfo;
				let priorityList = that.priorityList;
				let importantList = that.importantList;
				let uploadList = that.uploadList;
				let taskId = that.taskId;
				if(taskId!= null){
					datainfo.taskId = taskId;
					getApp().globalData.refreshPage = 'detail';
				}
				datainfo.endTime = datainfo.endTime + ' 23:59:59';
				datainfo.importance = importantList[maskInfo.important];
				datainfo.priority = priorityList[maskInfo.priority];
				datainfo.label = datainfo.label.name;
				leader.forEach(res=>{
					if(datainfo.leaders){
						datainfo.leaders.push(res.id);
					}
				})
				participants.forEach(res=>{
					if(datainfo.participant){
					 datainfo.participant.push(res.id);
					}
				})
				if(uploadList.length > 0){
					for(let res of uploadList){
						let result = await uploadImage(res);
						result = JSON.parse(result);
						datainfo.imageFiles.push({fileName:result.data.name,fileUrl:result.data.url});
					}
					
				}
				that.refreshCheckbox = true;
				api.addTaskTarget(datainfo).then(res=>{
					uni.showToast({
						title: '发布成功',
						duration: 2000,
						complete:function(){
							getApp().globalData.personList = {leader:[],participants:[],assignment:[]};
							that.$emit('refresh');
							that.datainfo = {
								taskName:null,
								taskType:1,
								taskDetails:null,
								keyword:null,
								leaders:[],
								label:null,
								participant:[],
								imageFiles:[],
								importance:'3级重要',
								priority:'3级紧急',
								isSelf:2,
								cycle:0,
								endTime:null,
								bonus:null,
								score:null,
								remark:null,
								disassemble:1,
								redeploy:1,
								workProducts:null,
								evaluation:null,
							};
							that.refreshCheckbox = false;
							that.uploadList= [];
							that.maskInfo = { priority: 2,important: 2};
							if(taskId == null){
								getApp().globalData.refreshPage = 'masklist';
								uni.switchTab({
									url: '/pages/mask/index/index'
								});
							}
						}
					});
					
				});
			},
			/**
			 * 任务名称input触发事件
			 */
			TasknameinputChange:function(e){
				this.datainfo.taskName = e.detail.value;
				console.log(e.detail.value);
			},
			/**
			 * 任务内容input触发事件
			 */
			taskDetailsinputChange:function(e){
				this.datainfo.taskDetails = e.detail.value;
				console.log(e.detail.value);
			},
			checkboxChange:function(e){
				this.datainfo.disassemble = e.disassemble;
				this.datainfo.redeploy= e.redeploy;
			},
			/**
			 * 是否公开
			 */
			switchChange:function(e){
				if(e.detail.value == true){
					this.datainfo.isSelf = 1;
				}else{
					this.datainfo.isSelf = 2;
				}
				console.log(e.detail.value);
			},
			/**
			 * cell组件返回input函数
			 */
			inputValueChange:function(data){
				if(data.name == "keyword"){
					this.datainfo.keyword = data.value;
				}else if(data.name == "bonus"){
					this.datainfo.bonus = data.value;
				}else if(data.name == "score"){
					this.datainfo.score = data.value;
				}else if(data.name == "remark"){
					this.datainfo.remark = data.value;
				}else if(data.name == "workProducts"){
					this.datainfo.workProducts = data.value;
				}else if(data.name == "evaluation"){
					this.datainfo.evaluation = data.value;
				}
			},
			/**
			 * 负责人关闭按钮点击触发事件
			 */
			leaderCloseChange:function(e){
				this.$emit('peopleclose',{index:e,key:'leader'});
			},
			/**
			 * 参与人关闭按钮点击触发事件
			 */
			participantsCloseChange:function(e){
				this.$emit('peopleclose',{index:e,key:'participant'});
			},
			/**
			 * 负责人改变触发事件
			 */
			directorChange: function(type) {
				let selectedType = 'checkbox';
				let taskId = this.taskId;
				let url = '/pages/initiate/personnel/personnel?identity=' + type;
				if(taskId != null && type == 'leader'){
					// url =  url + '&taskid=' + taskId;
					selectedType = 'radio';
				}
				url = url + '&selectedType=' + selectedType;
				uni.navigateTo({
					url: url
				});
			},
			/**
			 * 截止时间选择器改变事件
			 */
			bindDateChange: function(e) {
				this.datainfo.endTime = e.detail.value;
				console.log(e.target.value);
			},
			/**
			 * 任务分类点击触发事件
			 */
			classifyOpen: function() {
				this.classifyDisalogType = true;
			},
			/**
			 * 任务分类弹窗点击取消触发事件
			 */
			classifyCancel: function() {
				this.classifyDisalogType = false;
			},
			/**
			 * 任务分类改变触发事件
			 */
			classifyChange: function(e) {
				console.log(e.result);
				this.classifyselected = e.index;
				this.datainfo.label = e.result;
				// this.maskInfo.classify = e.result;
				this.classifyDisalogType = false;
			},
			/**
			 * 优先级弹窗触发事件
			 */
			prioritySheet: function() {
				let that = this;
				let priorityList = that.priorityList;
				uni.showActionSheet({
					itemList: priorityList,
					success: function(res) {
						that.maskInfo.priority = res.tapIndex;
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			/**
			 * 上传图片/附件触发事件
			 */
			uploadImage: function() {
				let that = this;
				let count = 9;
				let uploadList = that.uploadList;
				if(uploadList.length < 9){
					uni.chooseImage({
						count: count - uploadList.length, 
						sizeType: ['original', 'compressed'],
						sourceType: ['album'],
						success: function(res) {
							uploadList.push.apply(uploadList,res.tempFilePaths);
							that.uploadList = uploadList;
						}
					});
				}
			},
			/**
			 * 重要程度弹窗触发事件
			 */
			importantSheet: function() {
				let that = this;
				let importantList = that.importantList;
				uni.showActionSheet({
					itemList: importantList,
					success: function(res) {
						that.maskInfo.important = res.tapIndex;
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #fafafa;
	}

	.clear-tabbar {
		height: 100rpx;
	}

	.maskTitle-box {
		display: flex;
		position: relative;
		width: calc(100% - 40rpx);
		margin: 0 auto;

		.icon {
			width: 40rpx;
			height: 40rpx;
			margin-top: 18rpx;
		}

		.title {
			margin-top: 18rpx;
			font-size: 30rpx;
		}

		.import-sign {
			color: red;
			margin-top: 18rpx;
		}

		.switch-box {
			position: absolute;
			right: 20rpx;
			top: 0;
			display: flex;

			.switch-value {
				font-size: 20rpx;
				line-height: 60rpx;
			}

			.switch {
				transform: scale(0.7);
			}
		}
	}

	.maskTitle-input-box {
		margin-top: 20rpx;

		.maskTitle-input {
			width: calc(100% - 40rpx);
			box-sizing: border-box;
			padding: 0 20rpx;
			background-color: white;
			line-height: 100rpx;
			height: 100rpx;
			margin: 0 20rpx;
		}
	}

	.maskContent-box {
		.content-title {
			font-size: 30rpx;
			line-height: 80rpx;
			margin-left: 20rpx;
		}

		.input-content {
			background-color: white;
			box-sizing: border-box;
			width: calc(100% - 40rpx);
			margin: 0 auto;
			height: 200rpx;
			padding: 20rpx;
		}
	}

	.border-top {
		border-top: 1px solid #ededed;
	}

	.cell-item {
		display: flex;
		position: relative;
		background-color: white;
		height: 80rpx;
		width: calc(100% - 40rpx);
		box-sizing: border-box;
		padding: 0 20rpx;
		margin: 0 auto;

		.icon-box {
			width: 50rpx;
			height: 50rpx;
			margin-top: 15rpx;

			.icon {
				width: 100%;
				height: 100%;
			}
		}

		.title {
			white-space: nowrap;
			line-height: 80rpx;
			margin-left: 10rpx;
		}

		.import-sign {
			line-height: 80rpx;
			color: red;
		}

		.value-box {
			position: absolute;
			right: 10rpx;
			top: 0rpx;
			display: flex;

			.value {
				line-height: 80rpx;
			}

			.more-icon {
				margin-top: 20rpx;
				width: 40rpx;
				height: 40rpx;

				.icon {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.card-box {
		margin-top: 40rpx;
	}

	.button-box {
		margin-bottom: constant(safe-area-inset-bottom);
		margin-bottom: env(safe-area-inset-bottom);

		.confirm-button {
			width: calc(100% - 40rpx);
			background-color: #416ade;
			margin: 20rpx auto;
			color: white;
			text-align: center;
			line-height: 80rpx;
			border-radius: 10rpx;
		}
	}
</style>
